<template>
  <common-page title="告警消息" :istabs="true" class="warn-page">
    <avue-crud
      ref="crud"
      v-model="form"
      class="crud-table"
      :option="tableOption"
      :data="list"
      :page.sync="page"
      :search.sync="searchForm"
      :table-loading="loading"
      :header-cell-class-name="() => 'crud-table-head'"
      :cell-class-name="() => 'crud-cell'"
      @search-change="searchChange"
      @refresh-change="getList()"
      @current-change="currentChange"
      @size-change="handleSizeChange"
      @hook:mounted="$ele.tableMount($refs.crud)"
      @hook:beforeDestroy="$ele.tableDestroy($refs.crud)"
    >
      <template #status="{ row }">
        {{ formatterValue2(row.status, false, statusDic) }}
      </template>
      <template #fileThumbAddress="{ row }">
        <div v-if="row.thumbVoList && row.thumbVoList.length > 0" style="display: flex; justify-content: center">
          <div v-for="(item, index) in row.thumbVoList" :key="index">
            <el-image
              style="width: 80px; height: 38px; margin: 0 5px"
              fit="contain"
              :src="downLoadUrl(item.fileThumbAddress)"
              :preview-src-list="[downLoadUrl(item.fileAddress)]"
            ></el-image>
          </div>
        </div>
        <div v-else>--</div>
      </template>
      <template #menu="{ row }">
        <el-button type="text" @click="handleDetail(row)">详情</el-button>
      </template>
      <template #searchMenu="{ size }">
        <el-button type="primary" :size="size" @click="searchChange">查 询</el-button>
        <el-button type="primary" plain :size="size" @click="resetForm">重 置</el-button>
      </template>
    </avue-crud>
  </common-page>
</template>

<script>
import { tableOption } from './tableOption'
import { getPage, getWarnModuleList, getVideoPoints, getShipList, getTenantList } from '@/api/warnmessage'
import { getDict } from '@/api/dict'
import { objFindDateArray2String } from '@/utils/util'
import { mapGetters, mapActions, createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('user')

export default {
  components: {},
  data() {
    return {
      searchFormDefault: {},
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      list: [],
      loading: true,
      form: {},
      status: '0',
      switchType: '0',
      warnTypes: [],
      installations: [],
      levelDic: [
        {
          label: '一级告警',
          value: '1'
        },
        {
          label: '二级告警',
          value: '2'
        },
        {
          label: '三级告警',
          value: '3'
        }
      ],
      statusDic: [
        // {
        //   label: '待确警',
        //   value: 0
        // },
        {
          label: '待处理',
          value: 1
        },
        {
          label: '待处理',
          value: 2
        },
        // {
        //   label: '误警',
        //   value: 4
        // },
        {
          label: '已处理',
          value: 5
        }
      ],
      //仅供查询 为了不展示相同的label
      statusDic_select: [
        // {
        //   label: '待确警',
        //   value: 0
        // },
        {
          label: '待处理',
          value: true
        },
        // {
        //   label: '确警',
        //   value: 2
        // },
        // {
        //   label: '误警',
        //   value: 4
        // },
        {
          label: '已处理',
          value: false
        }
      ],
      timeDic: [
        {
          label: '否',
          value: 0
        },
        {
          label: '是',
          value: 1
        }
      ],
      warnModuleArr: [],
      videoArr: [],
      tenantArr: [],
      shipArr: [],
      active: '1'
    }
  },
  computed: {
    ...mapState(['tenantId']),
    tableOption() {
      return tableOption.call(this)
    },
    downLoadUrl() {
      return function (url) {
        return `/api/oss/download/sturgeon?objectName=${encodeURIComponent(url)}`
      }
    }

    // ...mapGetters({getDictByCode:'dict/getDictByCode',}),
  },
  activated() {
    this.getList()
  },
  created() {
    this.initDict()
  },
  mounted() {
    // this.initDict()
    // this.setDefaultSearch()
  },
  methods: {
    ...mapActions({
      clearCache: 'tagsView/clearCache'
      // getDict:'dict/getDict'
    }),
    setDefaultSearch() {
      const { active, time, shipId, processingTime } = this.$route.query
      if (active !== undefined && active === this.active) {
        if (time) {
          this.searchFormDefault.createTime = [time + ' 00:00:00', time + ' 23:59:59']
        }
        if (processingTime) {
          this.searchFormDefault.processingTime = [processingTime + ' 00:00:00', processingTime + ' 23:59:59']
        }
        if (shipId) {
          this.searchFormDefault.shipId = shipId
        }
      }
    },
    handleChangeTab() {
      this.page.currentPage = 1
      this.$refs.crud.searchReset()
      this.list = []
      this.getList()
    },
    resetForm() {
      this.$refs.crud.searchReset()
      this.page.currentPage = 1
      this.getList()
    },
    async initDict() {
      Promise.all([this.getVideo(), this.getWarnModule(), this.getTenant(), this.getShip()]).then(async () => {
        this.setDefaultSearch()
        this.getList()
      })
    },

    getWarnModule() {
      getWarnModuleList().then((res) => {
        this.warnModuleArr = res.result
      })
    },
    getTenant() {
      this.searchForm.shipId = ''
      this.searchForm.videoPointsType = ''
      getTenantList({ superviseTenantId: this.tenantId }).then((res) => {
        if (res.result) {
          this.tenantArr = res.result.map((item) => {
            return {
              label: item.name,
              value: item.id
            }
          })
        } else {
          this.tenantArr = []
        }
      })
    },
    getShip(value) {
      this.searchForm.videoPointsType = ''
      this.searchForm.shipId = ''
      getShipList({
        superviseTenantId: this.tenantId,
        tenantId: value || ''
      }).then((res) => {
        if (res.result) {
          this.shipArr = res.result.map((item) => {
            return {
              label: item.name,
              value: item.id
            }
          })
        } else {
          this.shipArr = []
        }
      })
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getList()
      this.$refs.curd?.doLayout()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
      this.$refs.curd?.doLayout()
    },
    async getVideo(value) {
      this.searchForm.videoPointsType = ''

      const { result } = await getVideoPoints()
      this.videoArr = result
    },
    handleTypeName(value) {
      let name = ''
      const obj = this.warnModuleArr.find((i) => i.warningModelCode == value)
      if (obj != undefined) {
        name = obj.warningModelName
      }
      return name
    },
    getList(option) {
      if (JSON.stringify(this.searchFormDefault) !== '{}') {
        for (let searchFormDefaultKey in this.searchFormDefault) {
          this.searchForm[searchFormDefaultKey] = this.searchFormDefault[searchFormDefaultKey]
        }
        this.searchFormDefault = {}
      }
      this.loading = true
      const params = objFindDateArray2String({
        pageNumber: this.page.currentPage,
        pageSize: this.page.pageSize,
        ...this.searchForm,
        warningFlag: this.active == '0' ? true : this.active == '1' ? false : '',
        startTime: this.searchForm.createTime?.length ? this.searchForm.createTime[0] : undefined,
        endTime: this.searchForm.createTime?.length ? this.searchForm.createTime[1] : undefined,
        processTimeStart: this.searchForm.processingTime?.length ? this.searchForm.processingTime[0] : undefined,
        processTimeEnd: this.searchForm.processingTime?.length ? this.searchForm.processingTime[1] : undefined,
        confirmWarningTimeStart: this.searchForm.confirmWarningTime?.length ? this.searchForm.confirmWarningTime[0] : undefined,
        confirmWarningTimeEnd: this.searchForm.confirmWarningTime?.length ? this.searchForm.confirmWarningTime[1] : undefined,
        createTime: undefined,
        processingTime: undefined,
        confirmWarningTime: undefined
      })
      getPage(params)
        .then((response) => {
          this.list = response.result.records
          this.page.total = response.result.total
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
          this.$refs.crud?.doLayout()
        })
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.getList(form || '')
      done && done()
    },

    handleDetail(row) {
      // this.$refs.detail.view(row);
      this.$router.push({
        path: '/warning/detail',
        query: {
          id: row.id
        }
      })
    },

    handleBack() {
      this.getList()
    },
    formatterValue(value, dicCode, dic) {
      const res = dic || this.$store.getters['dict/getDictByCode'](dicCode)
      return (res.find((i) => i.value == value) && res.find((i) => i.value == value).lable) || value || '--'
    },
    formatterValue2(value, dicCode, dic) {
      const res = dic || this.$store.getters['dict/getDictByCode'](dicCode)
      return (res.find((i) => i.value == value) && res.find((i) => i.value == value).label) || value || '--'
    }
  }
}
</script>

<style lang="scss" scoped>
.warn-page {
  ::v-deep .el-table__fixed {
    tbody {
      tr {
        height: 70px !important;
      }
    }
  }
  ::v-deep .el-table__fixed-right {
    tbody {
      tr {
        height: 70px !important;
      }
    }
  }
  ::v-deep .el-table__body-wrapper {
    .el-table__row {
      height: 70px !important;
    }
  }
}
.crud-tabs__card {
  background: #e9eff7 !important;
}
</style>
